---
import '../styles/global.css'
// import Navigation from '../components/Navigation.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'

import Greeting from '../components/Greeting'

const pageTitle = "首页"
---

<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
		<!-- <a href="/about/">关于</a>
		<a href="/blog/">博客</a> -->
		<Header />
		<h1>{pageTitle}</h1>
		<p>Hello World!</p>
		<!-- 按钮无效 -->
		<!-- <Greeting messages={["你好，世界！", "こんにちは、世界！", "안녕하세요, 세계!"]} /> -->
		<!-- 按钮有效。因为 client:load 指令告诉 Astro 在页面加载时将其 JavaScript 发送并重新运行到客户端上，使组件可交互。这称为**被注水**的组件。 -->
		<Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
		<Footer/>
	</body>
</html>